<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="7" :offset="0">
                    <el-form-item label="课程标题">
                        <el-input v-model="searchForm.title" placeholder="课程标题" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="15">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData">搜索</el-button>
                        <el-button @click="resetSearchForm">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>


        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableDataLoading">

            <el-table-column label="课程类别" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.categoryName }}
                </template>
            </el-table-column>

            <el-table-column label="课程标题" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.title }}
                </template>
            </el-table-column>

            <el-table-column label="课程描述" align="center" show-overflow-tooltip>
                <template #default="{ row }">
                    {{ row.description }}
                </template>
            </el-table-column>

            <el-table-column label="适用人群" align="center">
                <template #default="{ row }">
                    {{ formatRoleType(row.roleType) }}
                </template>
            </el-table-column>

            <el-table-column label="创建时间" align="center">
                <template #default="{ row }">
                    {{ dateFormatter(row.createTime) }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="100" align="center">
                <template #default="scope">
                    <el-button v-if="showBtnName(scope.row.id) != -1" type="success" size="small" text
                        @click="submitAssign(scope.row)">已选择</el-button>
                    <el-button v-else type="primary" size="small" text @click="submitAssign(scope.row)">未选择</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive, defineProps, nextTick } from 'vue'
import { dateFormatter } from '~/utils/common.js'

// 列表数据
const tableData = ref([])
const currentPage = ref(1)
const total = ref(0)
const limit = ref(5)
const tableDataLoading = ref(false)
import { api_course_list } from "~/api/exam/categoryApi";

// props
const props = defineProps({
    //已选择的课程
    officialCourseList: null,
})

// 已选择的数据
const selectedDataList = ref([])

// 查询条件
const searchForm = reactive({
    title: null,
    state: "1",
    page: currentPage.value,
    size: limit.value,
})

// 生命周期
onMounted(async () => {

    //已经选择的进行赋值
    if (null != props.officialCourseList && undefined != props.officialCourseList && props.officialCourseList.length>0) {
        selectedDataList.value = props.officialCourseList
    }

    //加载表格数据
    await getData()
})

//获取列表数据
async function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    api_course_list(searchForm)
        .then(res => {
            if (res) {
                tableData.value = res.records
                total.value = Number(res.total)
            } else {
                tableData.value = []
                total.value = 0
            }
        })
        .finally(() => {
            tableDataLoading.value = false
        })
}

// 重置搜索框
const resetSearchForm = () => {
    searchForm.title = null
    searchForm.state = "1"
    getData()
}

const showBtnName = (id) => {
    let index = selectedDataList?.value?.findIndex(x => x.id == id)
    return index
}

// 选择|取消课程
function submitAssign(row) {
    let index = selectedDataList?.value.findIndex(x => x.id == row.id)
    if (index != -1) {
        //取消选择
        selectedDataList.value.splice(index, 1)
    } else {
        //确认选择
        // selectedDataIds.value = []
        selectedDataList.value.push({"id":row.id,"title":row.title})
    }
    //传递给调用者
    getCheckedCourseList()
}

// 对外暴露方法
const emit = defineEmits([
    'getCheckedCourseList',
])

const getCheckedCourseList = () => {
    const selectData = selectedDataList
    let returnParams = selectData.value
    // console.log(JSON.stringify(returnParams))
    emit("getCheckedCourseList", returnParams)
}

function formatRoleType(roleType) {
    if (roleType == '0') {
        return '全部'
    } else if (roleType == '1') {
        return '工程师'
    } else if (roleType == '2') {
        return '船员'
    } else {
        return '-'
    }
}
</script>

<style>
.el-table__header-wrapper .el-checkbox {
    display: none
}
</style>
